@charset "utf-8";

//计算rem
@function r($px){
    @return ($px/40) * 1rem;
}
//减半
@function half($px){
    @return ($px/2) * 1px;
}


$orange:#ff9344;

html,body{
    height: 100%;
    position: relative;
    font-size: half(30);
}

//可重用的section样式s
@mixin sectionCss{
    width: r(710);
    position: absolute;
    top: half(150);
    bottom: half(135);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
//可重用的section样式s


//可继承span s
.spanComm{
    display: inline-block;
    line-height: r(90);
    vertical-align: bottom;
}
//可继承span e

//可重用span s
@mixin spanComm1{
    display: block;
    text-align: center;
}
//可重用span e

//可继承img s
.imgComm{
    vertical-align: middle;
    margin-right: r(10);
}
//可继承img e


//可重用搜索框s
@mixin searchBar{
    width: r(266);
    height: half(51);
    border: 1px solid $orange;
    border-radius: half(51);
    font-size: 0;
    input[type="search"]{
        width: calc(100% - 22px);
        height: half(51);
        vertical-align: top;
        border-radius: half(25);
        border: none;
        padding-left: half(15);
        background-color: transparent;
    }
    i.iconfont{
        width: half(32);
        height: half(34);
        font-size: 18px;
        color: #ff9344;
        display: inline-block;
        margin-top: half(15)/2;
    }
}
//可重用搜索框e


//头部s
header{
    width: r(750);
    height: half(150);
    position: absolute;
    top: 0;
    padding: half(17) half(23) half(10);
    box-sizing: border-box;
    .logo{
        width: half(123);
        height: half(123);
        overflow: hidden;
        a{
            display: block;
            width: 100%;
            height: 100%;
            span{
                @include spanComm1;
                width: half(119);
                height: half(56);
                line-height: half(56);
                font-size: half(26);
                border: 1px solid $orange;
                border-radius: half(10);
                margin-top: half(31);
            }
        }
        img{
            width: 100%;
            vertical-align: top;
        }
    }
    .searchBar{
        @include searchBar;
        margin: half(36) auto;
    }
    .topTittle{
        width: r(266);
        height: half(51);
        line-height: half(51);
        text-align: center;
        font-size: half(26);
        margin: half(36) auto;
    }
    .tittleImg{
        width: half(60);
        height: half(51);
        margin: half(36) auto;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
        span{
            @include spanComm1;
            position: absolute;
            width: half(30);
            height: half(30);
            line-height: half(30);
            color: white;
            background-color: #fa5050;
            font-size: half(24);
            border-radius: 50%;
            bottom:half(35);
            right: 0;
        }
    }
    .selectBar{
        width: r(159);
        height: half(56);
        border: 1px solid $orange;
        margin-top: half(31);
        background-image: url(../img/sanjiaoxing.png);
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size:  15px 8px;
        select{
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 100%;
            vertical-align: top;
            border: none;
            padding-left: half(15);
            display: block;
            background: transparent;
            font-size: half(20);
        }
    }
}


//头部e


//标题s
.discount{
    padding: r(15) r(20) 0;
    height: r(90);
    overflow: hidden;
    .discountLeft{
        height: 100%;
        span{
            @extend .spanComm;
            font-size: half(30);
            img{
                @extend .imgComm;
                width: half(60);
            }
        }
    }
    .discountRight{
        height: 100%;
        span{
            @extend .spanComm;
            font-size: half(24);
            img{
                @extend .imgComm;
                width: half(30);
            }
        }
    }
}
//标题e

//底部s
footer{
    width: r(750);
    height: half(135);
    position: absolute;
    bottom: 0;
    padding: r(17) r(20) r(14);
    box-sizing: border-box;
    overflow: hidden;
    &>a{
        display: block;
    }
    .icon{
        width: r(710)/4;
        i.iconfont{
            width: half(75);
            height: half(71);
            font-size: 36px;
            display: block;
            margin: auto;
            color: $orange;
        }
        h3{
            font-size: half(26);
            font-weight: 100;
            text-align: center;
            margin-top: half(7);
        }
    }
}
//底部e


